<template>
  <view class="authNameMain">
    <view class="authNameBox">
      <view class="logoBox flex align-center">
        <image src="../../static/images/logoImg.png" mode="widthFix"></image>
      </view>
      <view class="titleBox">
        <view>身份证信息认证</view>
        <text>为保障您的资金安全，需要验证身份信息</text>
      </view>
      <view class="formBox">
        <u-form
          :model="form"
          ref="uForm"
          :rules="rules"
          :error-type="errorType"
        >
          <u-form-item label="真实姓名" label-position="top" prop="name">
            <u-input
              type="text"
              v-model="form.name"
              placeholder="请填写真实姓名"
            />
          </u-form-item>
          <u-form-item label="身份证号" label-position="top" prop="intro">
            <u-input
              v-model="form.intro"
              type="text"
              placeholder="请填写身份证号码"
            />
          </u-form-item>
        </u-form>

        <view class="btnBox">
          <view class="flex align-center justify-center">
            <u-icon class="uIcon" name="lock" color="#999" size="32"></u-icon>
            信息已加密，实时保障您的信息安全
          </view>
        </view>
        <u-button
          type="default"
          :ripple="true"
          shape="square"
          :disabled="clicked"
          @click="$u.debounce(confirm, 500)"
          class="sureBtn"
          >确认提交</u-button
        >
      </view>
    </view>
    <u-toast ref="uToast" />
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      clicked: false,
      errorType: ["toast"],
      form: {
        name: "",
        intro: "",
      },

      // 表单验证
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
          },
        ],
        intro: [
          {
            required: true,
            message: "请输入身份证号",
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.idCard(value);
            },
            message: "身份证号码不正确",
          },
        ],
      },
    };
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    confirm() {
      let params = {
        real_name: this.form.name,
        id_card: this.form.intro,
      };
      params = this.$tools.aesEncryptBat(this, params, "real_name,id_card");
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.clicked = true;
          this.$u.api.accountCert(params).then((res) => {
            // 打印调用成功回调
            if (res.status == 200) {
              this.$refs.uToast.show({
                title: res.msg,
                type: "default",
                duration: 2000,
              });
              this.clicked = false;
              //更新本地缓存
              let loginInfo = uni.getStorageSync("loginInfo");
              loginInfo.real_name = this.form.name;
              loginInfo.nick_name = this.form.name;
              loginInfo.identity_number = this.form.intro;
              loginInfo.isCert = 1;
              uni.setStorageSync("loginInfo", loginInfo);
              setTimeout(() => {
                uni.reLaunch({
                  url: "/pages/sy/sy",
                });
              }, 2000);
            } else {
              this.$refs.uToast.show({
                title: res.msg,
                type: "default",
                duration: 1200,
              });
              this.form.name = "";
              this.form.intro = "";
              this.clicked = false;
            }
          })
		  .catch((res) => {
		  	if (res.errMsg == "request:fail timeout") {
		  		this.$u.toast("请求超时，请重试!");
		  	} else if (res.errMsg == "request:fail") {
		  		this.$u.toast("请求失败，请重试");
		  	} else {
		  		 this.$u.toast("请求失败，请重试");
		  	}
		  	this.$loading(false);
		  	setTimeout(() => {
		  		this.$u.route({
		  			type: "navigateBack",
		  			delta: 1,
		  		});
		  	}, 2000);
		  });
        } else {
          console.log("验证失败");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

.authNameBox {
  padding: 30rpx;

  .logoBox {
    height: 100rpx;
    font-size: 36rpx;
    font-weight: bold;

    image {
      margin-top: 60rpx;
      width: 140rpx;
      height: 140rpx;
      margin-right: 10rpx;
    }
  }

  .titleBox {
    view {
      margin-top: 80rpx;
      font-size: 50rpx;
      font-weight: 300;
      padding-bottom: 5rpx;
    }

    text {
      font-size: 28rpx;
      color: #999;
      display: block;
    }
  }

  .formBox {
    padding: 40rpx 0;

    .btnBox {
      margin: 400rpx 0 30rpx;
    }

    .sureBtn {
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 100rpx;
      background-color: #fb4535;
      color: #fff;

      &::after {
        border: none;
      }
    }
  }
}
</style>
